<template>
  <div class="rightcontent" style="margin-right: 12px">
    <a-space>
      <!-- <a style="padding: 0 12px; display: inline-block; user-select: none" @click="handleClick">
        <BgColorsOutlined />
      </a> -->
      <span>{{ store.userApp.userInfo.username }}</span>
      <a-dropdown>
        <template #overlay>
          <a-menu @click="menuClick">
            <!-- <a-menu-item key="1">
              <template #icon>
                <SettingOutlined />
              </template>
              <span>个人设置</span>
            </a-menu-item> -->
            <a-menu-item key="2">
              <template #icon>
                <LogoutOutlined />
              </template>
              <span>退出登录</span>
            </a-menu-item>
          </a-menu>
        </template>
        <a-avatar shape="square" size="small">
          <template #icon>
            <UserOutlined />
          </template>
          {{ currentUser.nickname }}
        </a-avatar>
      </a-dropdown>
    </a-space>
  </div>
  <a-drawer v-model:open="open" :width="300" placement="right" :closable="false">
    <div>
      <h3>主题风格</h3>
      <div>
        <div>
          <img
            src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg"
            alt="light"
          />
        </div>
        <div>
          <img
            src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg"
            alt="dark"
          />
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import {
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  BgColorsOutlined
} from '@ant-design/icons-vue'
import type { MenuProps } from 'ant-design-vue'
import { ref } from 'vue'
import store from '@/store'
import { useRouter } from 'vue-router'
const router = useRouter()

export type CurrentUser = {
  nickname: string
  avatar?: string
}

const open = ref(false)

defineProps<{
  currentUser: CurrentUser
}>()

const handleClick = () => {
  apply(randomTheme())
}

const menuClick: MenuProps['onClick'] = (e) => {
  const { key } = e
  if (key === '1') {
    // 主题设置
    open.value = true
  } else if (key === '2') {
    // 退出登录
    store.userStore.LoginOut()
    router.push({
      name: 'Login'
    })
  }
}
</script>

<style lang="less" scoped>
.rightcontent {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
</style>
